<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div>


        <v-card>
            <v-card-title>
                <v-btn class="primary" @click="addBrand">新增品牌</v-btn>
                <v-spacer/>

                <v-text-field label="搜索" append-icon="search" v-model="key"></v-text-field>
            </v-card-title>

            <v-divider/>

            <v-data-table
                    :headers="headers"
                    :items="brands"
                    :pagination.sync="pagination"
                    :total-items="totalBrands"
                    :loading="loading"
                    class="elevation-1"
            >
                <template slot="items" slot-scope="props">
                    <td>{{ props.item.id }}</td>
                    <td class="text-xs-center">{{ props.item.name }}</td>
                    <td class="text-xs-center">
                        <img v-if="props.item.image" :src="props.item.image" width="130" height="40">
                        <span v-else>无</span>
                    </td>
                    <td class="text-xs-center">{{ props.item.letter }}</td>
                    <td class="text-xs-center">
                        <!--                        <v-btn icon>-->
                        <!--                            <v-icon>edit</v-icon>-->
                        <!--                        </v-btn>-->
                        <!--                        <v-btn icon>-->
                        <!--                            <v-icon>delete</v-icon>-->
                        <!--                        </v-btn>-->

                        <v-btn class="warning" @click="editBrand(props.item)">编辑</v-btn>
                        <v-btn class="info" @click="deleteBrand(props.item.id)">删除</v-btn>
                    </td>
                </template>
            </v-data-table>
        </v-card>

        <!--点击新增需要的对话框-->
        <v-dialog v-model="isShow" width="500" persistent>
            <brand-form @close="closeWindow" :is-edit="isEdit" :old-brand="oldBrand"></brand-form>
        </v-dialog>

    </div>
</template>

<script>
    //引用外部组件
    import BrandForm from "./BrandForm"

    export default {

        //组件注册
        components:{
          BrandForm
        },

        name: "MyBrand",
        data() {
            return {
                oldBrand:{},
                isEdit:false, //默认走新增路线
                isShow: false,
                key: "",
                totalBrands: 0, // 总条数
                brands: [], // 当前页品牌数据,目前没有，下面模拟假数据
                loading: true, // 是否在加载中
                pagination: {}, // 分页信息
                headers: [ // 头信息
                    {text: 'id', align: 'center', value: 'id'},
                    {text: '名称', align: 'center', sortable: false, value: 'name'},
                    {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
                    {text: '首字母', align: 'center', value: 'letter', sortable: true},
                    {text: '操作', align: 'center', sortable: false}
                ]
            }
        },
        mounted() {
            this.getDataFromServer();
        },
        methods: {
            getDataFromServer() {
                this.$http.get("/item/brand/page", {
                    params: {
                        page: this.pagination.page,
                        rows: this.pagination.rowsPerPage,
                        sortBy: this.pagination.sortBy,
                        desc: this.pagination.descending,
                        key: this.key
                    }
                }).then(resp => {
                    this.brands = resp.data.items;
                    this.totalBrands = resp.data.total;

                    this.loading = false;

                }).catch(resp => {
                    console.log("请求失败");
                })
            },
            addBrand() {
                this.isShow = true;
                this.isEdit = false;
                this.oldBrand = null;
            },
            closeWindow() {
                this.isShow = false;
            },
            editBrand(oldBrand){

                //发起请求，请求分类业务，根据品牌的id信息查询对应的分类集合
                this.$http.get("/item/category/of/brand/"+oldBrand.id)
                    .then(resp=>{
                        oldBrand.categories = resp.data;

                        this.isShow = true;
                        this.isEdit = true;
                        //从view中取值，存入model（数据模型）
                        this.oldBrand = oldBrand;
                    }).catch(resp=>{

                        this.$message.error("根据品牌查询分类失败")
                })
            },
            deleteBrand(brandId){

            }
        },
        watch: {
            pagination: {
                deep: true,//深度监控，除了监控对象的引用地址之外，还要监控对象的内容
                handler(newVal) {
                    this.getDataFromServer();
                }
            },
            key() {
                this.getDataFromServer();
            }
        }
    }
</script>

<style scoped>

</style>